<template>
	<view class="container container333638">
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24 form-clz">
			<u-form-item class="diygw-col-24" :required="true" label="预约事项" prop="title">
				<u-input :focus="formData.titleFocus" placeholder="请输入预约事项" v-model="form.title"></u-input>
			</u-form-item>
			<u-form-item class="diygw-col-24" :required="true" label="手机号" prop="phone">
				<u-input :focus="formData.phoneFocus" placeholder="请输入手机号" v-model="form.phone"></u-input>
			</u-form-item>
			<u-form-item class="diygw-col-24" label="备注" prop="remark">
				<u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.remark" type="textarea"></u-input>
			</u-form-item>
		</u-form>
		<view class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
			<view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @click="submitForm">
				<text class="flex icon2 diygw-col-0 diy-icon-post"></text>
				<text class="diygw-col-0"> 保存 </text>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				formRules: {
					title: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '预约事项不能为空'
						}
					],
					phone: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '手机号不能为空'
						},

						{
							trigger: ['change', 'blur'],
							message: '请输入11位的手机号码',
							pattern: /^1[3-9]\d{9}$/
						}
					]
				},
				form: {
					title: '',
					phone: '',
					remark: ''
				},
				formData: {
					titleFocus: false,
					phoneFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {
				await this.initResetform();
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.$nextTick(async () => {
					let valid = await this.$refs.formRef.validate();
					if (valid) {
						//保存数据
						let param = this.form;
						let header = {};
						let url = '/cms/msg/add';

						if (this.form.id) {
							url = ' /cms/msg/update';
						}
						uni.showLoading({
							title: '正在保存...'
						});
						let res = await this.$http.post(url, param, header, 'json');
						uni.hideLoading();
						if (res.code == 200) {
							this.showToast('发布成功');
							this.navigateTo({
								type: 'page',
								redirect: '1',
								url: 'msg/index'
							});
						} else {
							this.showModal(res.msg, '提示', false);
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.form-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex3-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 0rpx;
		color: #747474;
		bottom: 0rpx;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 20rpx;
		background-color: #ffffff;
		overflow: hidden;
		left: 0rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
		padding-right: 16rpx;
	}
	.flex20-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 200rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-left-radius: 200rpx;
		border-top-right-radius: 200rpx;
		border-bottom-right-radius: 200rpx;
		padding-right: 10rpx;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.container333638 {
		background-color: #f5f5f5;
	}
</style>
